<script lang="ts" setup>
import { Popover, type PopoverOpenChangeDetails } from '@ark-ui/vue/popover';

const props = defineProps({
  content: {
    type: String,
    default: '',
  },

  okText: {
    type: String,
    default: '',
  },

  cancelText: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['ok', 'close']);

const handlePopoverChange = (details: PopoverOpenChangeDetails) => {
  if (!details.open) {
    emit('close');
  }
}

const handleOkClick = () => {
  emit('ok');
}
</script>

<template>
  <Popover.Root
    :auto-focus="false"
    lazy-mount
    unmount-on-exit
    :positioning="{
      placement: 'top',
    }"
    @open-change="handlePopoverChange"
  >
    <Popover.Trigger as-child>
      <slot></slot>
    </Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content class="min-w-200 border-1 border-#e8e8e8 rounded-4 bg-white p-20 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
        <Popover.Arrow
          :style="{
            '--arrow-size': '12px',
            '--arrow-background': '#fff',
          }"
        >
          <Popover.ArrowTip class="border-l-1 border-t-1" />
        </Popover.Arrow>

        <Popover.Description>
          <div class="text-14 text-#575757 leading-22">
            {{ props.content }}
          </div>
          <div class="mt-20 flex-y-center justify-end gap-x-8">
            <Popover.CloseTrigger as-child>
              <button
                type="button"
                class="border-1 border-#3D7CFA rounded-4 bg-#3D7CFA/6 px-12 py-4 text-12 text-#3D7CFA"
              >
                {{ props.cancelText || $t('home.component.popconfirm.cancel') }}
              </button>
            </Popover.CloseTrigger>
            <Popover.CloseTrigger as-child>
              <button
                type="button"
                class="border-1 border-#3D7CFA rounded-4 bg-#3D7CFA px-12 py-4 text-12 text-white"
                @click="handleOkClick"
              >
                {{ props.okText || $t('home.component.popconfirm.ok') }}
              </button>
            </Popover.CloseTrigger>
          </div>
        </Popover.Description>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
</template>

<style lang="scss" scoped>
</style>
